<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-19 00:00
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <!--  布局的整体插槽-->
  <x-render-extend-slot
    v-if="hasSlot(attrs.layoutName)"
    :componentFunc="getSlot(attrs.layoutName)"
    :data="attrs"
  ></x-render-extend-slot>


  <a-tabs v-else v-bind="attrs" v-model="attrs.activeKey" @change="changeHandler">
    <template v-for="(item) in children">
      <!--   布局的每一项插槽-->
      <x-render-extend-slot
        v-if="hasSlot(attrs.layoutName + upperNameFirstChar(item.code))"
        :key="item.code"
        :componentFunc="getSlot(attrs.layoutName + upperNameFirstChar(item.code))"
        :data="attrs"
        :value="item"
      ></x-render-extend-slot>

      <a-tab-pane v-else :key="item.code" :tab="item.name">
        <x-render-form-row
          :key="item.code"
          :data="item.children"
          v-on="$listeners">
        </x-render-form-row>
      </a-tab-pane>
    </template>
  </a-tabs>
</template>

<script>
import { COMPONENT_TYPE, CUSTOM_EVENT_TYPE } from '../../constants'
import XRenderExtendSlotMixin from '../../XRenderMixins/XRenderExtendSlotMixin'
import XRenderComponentMixin from '../../XRenderMixins/XRenderComponentMixin'

export default {
  name: COMPONENT_TYPE.LAYOUT_TABS,
  mixins: [XRenderComponentMixin, XRenderExtendSlotMixin],
  computed: {
    children: {
      get() {
        const { attrs } = this
        return attrs.children || []
      }
    }
  },
  methods: {
    changeHandler(key) {
      const { attrs } = this
      this.$emit(CUSTOM_EVENT_TYPE.CUSTOM_EVENT, {
        type: CUSTOM_EVENT_TYPE.CHANGE,
        compType: COMPONENT_TYPE.LAYOUT_TABS,
        layoutName: attrs.layoutName,
        isLayout: true,
        value: key
      })
    }
  }
}
</script>

<style scoped>

</style>
